<template>
  <div class="stats-cards">
    <div class="stat-card yellow">
      <div class="icon"><span>🏬</span></div>
      <div class="info">
        <div class="value">{{ formatNumber(stats.baseCount) }}</div>
        <div class="unit">个</div>
        <div class="label">总基地数</div>
      </div>
    </div>
    <div class="stat-card blue">
      <div class="icon"><span>🏬</span></div>
      <div class="info">
        <div class="value">{{ formatNumber(stats.totalArea) }}</div>
        <div class="unit">万亩</div>
        <div class="label">总种植面积</div>
      </div>
    </div>
    <div class="stat-card orange">
      <div class="icon"><span>🏬</span></div>
      <div class="info">
        <div class="value">{{ stats.maxBase }}</div>
        <div class="unit"></div>
        <div class="label">种植面积最大基地</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
interface Stats {
  baseCount: number;
  totalArea: number;
  maxBase: string;
}

interface Props {
  stats: Stats;
}

defineProps<Props>();

const formatNumber = (n: number) => n.toLocaleString();
</script>

<style scoped>
.stats-cards {
  display: flex;
  gap: 36px;
  margin-bottom: 36px;
}

.stat-card {
  flex: 1;
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 20px;
  padding: 36px 40px;
  box-shadow: 0 6px 32px 0 rgba(0, 0, 0, 0.06);
  min-width: 220px;
  position: relative;
  transition: box-shadow 0.2s;
}

.stat-card:hover {
  box-shadow: 0 12px 40px 0 rgba(24, 144, 255, 0.13);
}

.stat-card .icon {
  font-size: 54px;
  margin-right: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 16px;
  background: #f5f5f5;
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.03);
}

.stat-card.yellow .icon {
  background: #fffbe6;
  color: #faad14;
}

.stat-card.blue .icon {
  background: #e6f7ff;
  color: #1890ff;
}

.stat-card.orange .icon {
  background: #fff2e8;
  color: #fa541c;
}

.stat-card .info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.stat-card .info .value {
  font-size: 36px;
  font-weight: bold;
  color: #faad14;
  line-height: 1.1;
  letter-spacing: 1px;
}

.stat-card.blue .info .value {
  color: #1890ff;
}

.stat-card.orange .info .value {
  color: #fa541c;
  font-size: 26px;
}

.stat-card .info .unit {
  font-size: 16px;
  color: #888;
  margin-bottom: 2px;
  margin-top: 2px;
}

.stat-card .info .label {
  font-size: 17px;
  color: #888;
  margin-top: 8px;
  font-weight: 500;
}

@media (max-width: 1200px) {
  .stats-cards {
    flex-direction: column;
    gap: 28px;
  }
}
</style> 